<!--
 * @Author: your name
 * @Date: 2021-10-26 20:52:46
 * @LastEditTime: 2021-10-26 21:15:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\verify.vue
-->
<template>
    <div class="lazyload">
        <div v-for="(item, index) in lists" :key="index" class="lazyload_col">
            <!-- 一定要给图片设置默认高度，否则不会道道效果 -->
            <div v-for="item1 in item" :key="item1" class="lazyload_col_box">
                <img v-lazyload="item1" class="lazyload_img" alt="" />
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Col, Row, Card } from 'ant-design-vue'
import img1 from '@/assets/image/lazyload/img1.jpg'
import img2 from '@/assets/image/lazyload/img2.jpg'

export default defineComponent({
    name: 'WaterRipple',
    components: {
        Col,
        Row,
        Card,
    },
    setup() {
        let src = img1
        let longsrc = img2
        const lists = [
            [longsrc, longsrc, src, longsrc, longsrc, longsrc, longsrc, longsrc],
            [src, longsrc, longsrc, src, longsrc, longsrc, src, src],
            [longsrc, longsrc, src, src, src, longsrc, src],
            [src, longsrc, src, src, src, src, src],
        ]
        return {
            lists,
        }
    },
})
</script>

<style lang="less" scoped>
@media screen and (min-width: 700px) {
  .lazyload {
    width: 100%;
    display: flex;
    &_col {
      display: flex;
      flex-direction: column;
      width: 30%;
      margin: 0 0.2rem;
      &_box {
        background: #fff;
        padding: 1rem;
        box-sizing: border-box;
        width: 100%;
        margin: 0.2rem;
        img {
          width: 100%;
          min-height: 200px;
        }
      }
    }
  }
}
@media screen and (max-width: 700px) {
  .lazyload {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    &_col {
      display: flex;
      flex-direction: column;
      width: 48%;
      margin: 0 0.2rem;
      &_box {
        background: #fff;
        padding: 1rem;
        box-sizing: border-box;
        width: 100%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
        margin: 0.2rem;
        img {
          width: 100%;
          min-height: 100px;
        }
      }
    }
  }
}
</style>
